<template>
  <div>
    <h1>App组件</h1>

    <a href="#/home">首页</a>&nbsp; <a href="#/movie">电影</a>&nbsp;
    <a href="#/about">关于</a>&nbsp;

    <component :is="comName"></component>
  </div>
</template>

<script>
import MyHome from "@/components/MyHome";
import MyMovie from "@/components/MyMovie";
import MyAbout from "@/components/MyAbout";

export default {
  data() {
    return {
      comName: "MyHome",
    };
  },
  components: {
    MyHome,
    MyMovie,
    MyAbout,
  },
  created() {
    window.onhashchange = () => {
      console.log(location.hash);
      switch (location.hash) {
        case "#/home":
          this.comName = "MyHome";
          break;
        case "#/movie":
          this.comName = "MyMovie";
          break;
        case "#/about":
          this.comName = "MyAbout";
          break;
      }
    };
  },
};
</script>

<style>
</style>